import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Button, List, Tooltip } from "antd";
import { Avatar, Card } from "antd";
import * as React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { bindActionCreators } from "redux";
import doctorImage from "../../images/doctor_bg.png";
import { getDoctorlist } from "../../redux/action/ActionsForSaga";
import { DoctorData } from "../../type/DoctorData";

const styles = (theme: Theme) =>
  createStyles<"root">({
    root: {
      marginTop: "20px",
      "& button": {
        background: "#fafafa",
        color: "rgb(254,197,29)",
        borderColor: "rgb(254,197,29)"
      },
      "& span": {
        whiteSpace: "nowrap"
      }
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  data: DoctorData[];
  getData: any;
  loadParent: any;
}

class DoctorList extends React.Component<Iprops> {
  public componentWillMount() {
    this.props.getData({
      filterOne: null,
      filterTwo: null,
      searchParam: null
    });
  }
  public componentDidMount() {
    this.props.loadParent(this);
  }
  public render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <List
          grid={{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 4, xxl: 4 }}
          dataSource={this.props.data}
          size={"large"}
          itemLayout={"vertical"}
          pagination={{
            pageSize: 12,
            hideOnSinglePage: true,
            showTotal: total => `共 ${total} 家医院`
          }}
          split={true}
          renderItem={(item: DoctorData) => (
            <List.Item>
              <Card
                hoverable={true}
                actions={[
                  <Link
                    key={item.name}
                    to={`/order-doctor/doctor-detail/${item.id}`}
                  >
                    <Button size={"small"} type="primary">
                      预约挂号
                    </Button>
                  </Link>,
                  <Link
                    key={item.name}
                    to={`/order-doctor/estimate-doctor/${item.id}`}
                  >
                    <Button size={"small"} type="primary">
                      查看评价
                    </Button>
                  </Link>
                ]}
              >
                <Card.Meta
                  avatar={<Avatar size={60} src={doctorImage} />}
                  title={
                    <span>
                      {item.name}
                      <span style={{ fontSize: "12px", marginLeft: "10px" }}>
                        {item.title}
                      </span>
                    </span>
                  }
                  description={
                    <div>
                      <span style={{ fontWeight: "bold" }}>
                        <Tooltip
                          placement="topLeft"
                          title={item.hospitalName}
                          arrowPointAtCenter={true}
                        >
                          {item.hospitalName}
                        </Tooltip>
                      </span>
                      <br />
                      <span>{item.depart}</span>
                    </div>
                  }
                />
              </Card>
            </List.Item>
          )}
        />
      </div>
    );
  }
}
const mapStateToProps = (state: any) => {
  return {
    data: state
      .get("doctorReducer")
      .get("doctorList")
      .toJS()
  };
};

const mapDispatchToProps = ({} = (dispatch: any, ownProps: any) => {
  return bindActionCreators(
    {
      getData: getDoctorlist
    },
    dispatch
  );
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)(DoctorList));
